<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component_props</title>
</head>
<body>
<div id="example"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入prop-type库-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
    * 自定义用来显示一个人员信息的组件
    *   1.姓名必须指定
    *   2.如果性别没有指定，默认为男
    *   3.如果年龄没有指定。默认为18
    *   eg:姓名：Tom
    *      性别：女
    *      年龄：18
    * */
    // 1.定义组件
    // function Person(props) {
    //     return (
    //         <ul>
    //             <li>姓名：{props.name}</li>
    //             <li>年龄：{props.age}</li>
    //             <li>性别：{props.sex}</li>
    //         </ul>
    //     )
    // }

    class Person extends React.Component{
        render() {
            return (
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.sex}</li>
                </ul>
            );
        }
    }

    //制定属性值的类型和必要性
    Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number,
        sex: PropTypes.string
    }

    // 制定属性默认值
    Person.defaultProps = {
        sex:'男',
        age:18
    }



    const p1 = {
        name:'Tom',
        age:19,
        sex:'男'
    }
    // 渲染组件标签
    //ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>,document.getElementById('example'))
    // 使用拓展运算符
    /*
    * 作用
    * 1.打包
    * function fn(...as){} fn(1,2,3)
    * 2.解包
    * const arr = [1,2,3] const arr2 = [6,...arr.8]
    * */
    ReactDOM.render(<Person {...p1}/>,document.getElementById('example'))

    const p2 = {
        name:'Jack'
    }
    // 渲染组件标签
    ReactDOM.render(<Person name={p2.name} age={20}/>,document.getElementById('example2'))

</script>
</body>
</html>